<template>
  <div class="water-quality-container">
    <div class="water-quality-header">
      <div class="water-quality-time flexRow">
        <div class="water-quality-title">时间:</div>
        <!-- <div class="query-btn-group"> -->
        <px-form ref="formRef" :model="queryParams" :inline="true" class="custom-form-ui search-form">
          <px-form-item label="时间范围" prop="date">
            <px-date-picker
              v-model="queryParams.date"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width: 260px"
            />
          </px-form-item>
        </px-form>
        <div>
          <px-button type="primary" @click="handleQuery">查询</px-button>
          <px-button @click="resetQuery">重置</px-button>
        </div>
        <!-- </div> -->
      </div>
      <div class="water-quality-kind flexRow">
        <div class="water-quality-title">空调种类:</div>
        <px-button
          v-for="item in tabsOption"
          :key="item.name"
          :type="activeName === item.name ? 'primary' : ''"
          @click="tabSelectHandler(item.name)"
          >{{ item.label }}</px-button
        >

        <!-- <CustomTabs :tabList="tabsOption" :activeName="activeName" @tabSelect="tabSelectHandler" /> -->
      </div>
      <div class="water-quality-indicator flexRow">
        <div class="water-quality-title">水质指标:</div>
        <div ref="switchTabsContentRef">
          <px-button
            v-for="item in waterQualityList"
            :key="item.id"
            :type="waterValue === item.itemValue ? 'success' : ''"
            @click="handleIndicator(item.itemDesc, item.itemValue)"
            >{{ item.itemName }}</px-button
          >
        </div>
      </div>
      <!-- <div class="water-quality-factor flexRow">
        <div class="water-quality-title">因子:</div>
        <div class="query-btn-group">
          <px-button>置换水量</px-button>
          <px-button>温度</px-button>
          <px-button>缓释剂加药量</px-button>
          <px-button>杀虫剂加药量</px-button>
          <px-button>PH调节剂加药量</px-button>
        </div>
      </div> -->
    </div>
    <waterLineChart ref="waterChartRef" :chartsLineDataObj="chartsLineDataObj" :waterQualityList="waterQualityList" :waterValue="waterValue" />
    <hotChart ref="hotChartRef" :chartshotDataList="chartshotDataList" />
  </div>
</template>
<script setup>
import { ref, markRaw, computed, onMounted, onUnmounted, reactive } from "vue";
import CustomTabs from "@/components/Tabs/index.vue";
import { queryDictData } from "@/api/common";
import { queryChildByTypeCodeAndItemValue, queryTwoCorrelationFactorSAndResult, queryAl } from "@/api/machineClass";
import { queryPointNumChart } from "@/api/modules/operation";
import hotChart from "./hotChart.vue";

import waterLineChart from "./waterLineChart.vue";
import { nextTick } from "process";
const tabsOption = ref([
  {
    name: "MCHWConfig",
    label: "MCHW"
  },
  {
    name: "LCHWConfig",
    label: "LCHW"
  },
  {
    name: "HWConfig",
    label: "HW"
  },
  {
    name: "HHWConfig",
    label: "HHW"
  },
  {
    name: "CWConfig",
    label: "CW"
  },
  {
    name: "PCWConfig",
    label: "PCW"
  }
]);
const formRef = ref(null);
const queryParams = reactive({
  date: ""
});
const positionList = ref([]);
const chartsLineDataObj = ref({});
const waterChartRef = ref(null);
const waterValue = ref("");
const activeName = ref("MCHWConfig");

const searchLine = async () => {
  const { date } = queryParams;
  // const params = {
  //   startTime: date === "" ? "" : date[0],
  //   endTime: date === "" ? "" : date[1],
  //   pointList: positionList.value,
  //   timePeriod: "day"
  // };
  const params = {
    reportStart: date === "" ? "" : date[0],
    reportEnd: date === "" ? "" : date[1],
    subsystem: activeName.value,
    indicator: waterValue.value
  };
  const res = await queryAl(params);
  chartsLineDataObj.value = res;
  nextTick(() => {
    waterChartRef.value?.drawLineChart();
  });
};

const chartshotDataList = ref([]);
const hotChartRef = ref(null);

const searchHot = async () => {
  const { date } = queryParams;
  const params = {
    startTime: date === "" ? "" : date[0],
    endTime: date === "" ? "" : date[1],
    type: "MCHW"
    // factorA: ["pH", "Total_Hardness", "Conductivity"]
  };

  chartshotDataList.value = await queryTwoCorrelationFactorSAndResult(params);
  console.log(chartshotDataList.value, "");
  nextTick(() => {
    hotChartRef.value?.drawHotChart();
    console.log("lllll");
  });
};
// 查询
const handleQuery = async () => {
  try {
    searchLine();
    searchHot();
  } catch (err) {
    console.log(err);
  } finally {
    // tableLoading.value = false;
  }
};
//重置
const resetQuery = () => {
  formRef.value.resetFields();
};
//获取空调下面的水质指标
const waterQualityList = ref([]);
const getWaterQualityList = async () => {
  waterQualityList.value = await queryChildByTypeCodeAndItemValue({
    value: activeName.value,
    typeCode: "MCTS"
  });
  waterValue.value = waterQualityList.value[0].itemValue;
};
//
//点击指标
const handleIndicator = (itemDesc, value) => {
  positionList.value.push(JSON.parse(itemDesc).point_position);
  waterValue.value = value;
};
const tabSelectHandler = async selectName => {
  activeName.value = selectName;
  getWaterQualityList();
};

onMounted(() => {
  getWaterQualityList();
});
const time = Date.now();
</script>
<style lang="scss" scoped>
.water-quality-container {
  width: 100%;

  .water-quality-header {
    padding: 20px 0;
    background: #f7f7f7;

    .water-quality-time {
      height: 30px;
      margin-bottom: 20px;
    }

    .water-quality-kind {
      height: 30px;
      margin-bottom: 20px;
    }

    .water-quality-indicator {
      height: 30px;
    }

    .water-quality-factor {
      height: 30px;
    }

    .water-quality-title {
      width: 100px;
      height: 30px;
      margin-right: 40px;
      line-height: 30px;
      color: var(--px-text-color-regular);
      text-align: center;
      border: 1px solid var(--px-border-color);
      border-radius: 4px;
    }

    .flexRow {
      display: flex;
      flex-direction: row;
      text-align: center;
    }
  }
}
</style>
